<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgColor="bgColor" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">APP报工</block>
				<view slot="right" @tap="saveData">提交</view>
			</cu-custom>
			<view class="header">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
					<view class='cuIcon-search'></view>
					<input v-model="searchText" maxlength="300" confirm-type="search" @confirm="onInput" :focus="codeInputFocus" class="input" type="text"
                 @blur="codeInputFocus = false"
					 placeholder="扫描或输入条码" />
					<!-- <input v-model="searchText" @input="onInput" focus="true" class="input" type="text" placeholder="扫描或输入条码" /> -->
					<view class='cuIcon-scan' @tap="scanCode"  style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
				</view>
			</view>

			<view class="cu-form-group" style="margin-bottom: 10upx;"  @click="goPerationList()">
				<view class="title">
					<text>工序:</text>
					<text style="margin-left: 450rpx;" v-if="order.id==null">请选择</text>
          <uni-icons type="right" size="16"  v-if="order.id==null"></uni-icons>
<!--					<img src="../../static/icon/choose.png" style="width: 32rpx;height: 20rpx;" alt="" v-if="order.id==null">-->
					</view>
				<view class="uni-list-cell-db">
					<!-- <picker @change="bindGongxuChange" :value="indexGongxu" :range="gongxuPickerList">
						<view class="picker">{{gongxuPickerList[indexGongxu]}}</view>
					</picker> -->
					<view v-if="order.id" :value="indexGongxu" class="picker">
						{{order.operationName}}
					</view>
				</view>
			</view>

			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-card dynamic" v-for="(item,index) in productList" :key="index">
					<view class="cu-item shadow" :style="{'background-color':colorFlag===true?'#3bade3':'#f37b1d'}">
						<view class="text-content">
							产品名称： {{item.maktx}}
						</view>
						<view class="text-content">
							颜色尺码：{{item.colorName==null?'':item.colorName}} {{item.size==null?'':item.size}}
						</view>
						<view class="text-content">
							<view class="num">合格数：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.gmnga" name="gmnga" />
						</view>
					</view>
				</view>
			</form>
		</scroll-view>
    <div class="modalTip" v-show="modalTip">
      <div class="modalTip-body">
        <span class="title">提示</span>
        <span class="content">存在一条相同数据，是否重复录入？</span>
        <div class="button-box">
          <div class="button" @click="cancel">取消</div>
          <div class="button" @click="confirm">确定</div>
        </div>
      </div>
    </div>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/api/api.js'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
        modalTip: false,
				title: '下拉刷新 + 加载更多',
				data: [],
				productList: [],
				barcodeMap: new Map(),
				chooseList: [],
				array: [],
				index: 0,
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				date: new Date().toISOString().slice(0, 10),
				searchText: "",
        codeInputFocus: true,
				filterText: '',
				code: '',
				imageList: [],
				gongxuPickerList: ['请选择'],
				gongxuList: [],
				indexGongxu: 0,
				senddata: {
					sampleAndResult: {
						vornr: "",
					}
				},
				afs: false,
				colorFlag: true,
				bgColor: 'bg-green',
				showFinish:'false',
				order:{}
			};
		},

		// 导航搜索栏监听搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			// 搜索框内容 : e.text
			// console.log(e.text);
		},
		onLoad() {
			let url = '/dcloud/sysPara/sysPara/list'
			let that = this
			this.$http.get(url, {
				params: {
					para: "confirmationShowFinish",
				}
			}).then(res => {
				if (res.data.success) {
					this.showFinish = res.data.result.records[0].value
				}
			}).catch(err => {
				console.log(err);
			});
		},
		onShow() {
			let submitBack = uni.getStorageSync("submitBack")
			if (submitBack) {
				this.productList = []
				uni.removeStorageSync('submitBack')
				this.searchText = ''
			}
			if (uni.getStorageSync("industry") == 'afs') {
				this.afs = true
			}
			this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			let pages = getCurrentPages();
			if (pages[pages.length - 1].$vm.order.id) {
				this.order = pages[pages.length - 1].$vm.order
				this.indexGongxu = this.order;
			}
		},
		onUnload() {
			this.max = 0,
				this.productList = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				//	this.pageNo = this.pageNo + 1;
				// this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
      confirm () {
        this.productList.push(this.temp)
        this.searchText=''
        this.colorFlag = !this.colorFlag
        this.codeInputFocus = true
        this.modalTip =  false
      },
      cancel () {
        this.searchText=''
        this.codeInputFocus = true
        this.modalTip =  false
      },
			onInput(e) {
				if (this.indexGongxu == 0) {
					this.searchText = ""
					this.$tip.toast('请先选择工序')
					return;
				}
				let beanch = JSON.parse(e.detail.value)
				let temp={
					aufnr: beanch.aufnr,
					color: beanch.color,
					colorName: beanch.colorName,
					dispatchNo: beanch.dispatchNo,
					barcode: beanch.id,
					maktx: beanch.maktx,
					matnr: beanch.matnr,
					gmnga: beanch.quantity,
					size: beanch.size,
					werks: beanch.werks,
					werksName: beanch.werksName,
					ltxa1:this.indexGongxu.operationCode,
				}
        this.temp = temp
				let flag = true;
				for (const row of this.productList) {
					if (row.barcode == beanch.id){
					  flag=false
					  break
					}
				}
				if(!flag){
					let that = this
          // 使用uni.showModal 无法使input获取焦点，故采用自定义弹窗提示
          this.modalTip = true
          // uni.showModal({
					// 	title: '提示',
					// 	content: '存在一条相同数据，是否重复录入？',
					// 	success: function (res) {
					// 		if (res.confirm) {
					// 			that.productList.push(temp)
					// 			that.searchText=''
					// 			that.colorFlag = !that.colorFlag
					// 		}else{
					// 			that.searchText=''
					// 		}
					// 	}
					// });
				}else{
					this.productList.push(temp)
					this.searchText=''
					this.colorFlag = !this.colorFlag
          this.$nextTick(() => {
            this.codeInputFocus = true
          })
				}

				if(this.colorFlag){
					this.bgColor = 'bg-green'
				}else{
					this.bgColor = 'bg-orange'
				}

			},
			//选择工序
			goPerationList(){
				uni.navigateTo({
					url:'/packageA/mcloud/dcOperationList'
				})
			},
			initData() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 300);
			},
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			saveData() {
				if (this.indexGongxu == 0) {
					this.$tip.alert('请选择工序');
					return;
				}
				if (this.productList.length == 0) {
					this.$tip.alert('没有扫描数据');
					return;
				}
				if (this.afs) {
					uni.navigateTo({
						url: '/pages/mcloud/scanSubmit?data=' + JSON.stringify(this.productList),
					});
				} else {
					let url = '/dcloud/confirmation/confirmation/addBatch'
					this.$http.post(url, this.productList, {
						emulateJSON: true
					}).then(res => {
						if (res.data.success) {
							if (res.statusCode == "200") {
								uni.showToast({
									// icon: 'none',
									title: '保存成功'
								});
								this.searchText = ""
								this.productList = []
								this.barcodeMap = new Map()
							}
						}else{
							this.$tip.toast(res.data.message);
						}
					}).catch(err => {
						console.log(err);
					});
				}

			}

		}
	}
</script>
<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}


	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.cu-card>.cu-item {
		margin-bottom: 5px;
		margin-top: 10px;
	}

	.cu-card.dynamic>.cu-item>.text-content {
		margin-bottom: 1px;
		margin-top: 6px;
	}

	.date {
		height: 260rpx;
		text-align: center;
		background-color: #0081ff;
		color: #FFFFFF;
		word-break: break-all;
		margin-top: -1px;
	}

	.text {
		margin-top: 10rpx;
		word-break: break-all;
		color: #FFFFFF;
	}

	.baogong {
		margin-top: 6px;
		margin-botton: 6px;
		text-align: center;
		display: block;
		margin: 0 auto;
	}

	.mini-btn {
		text-align: center;
		border-radius: 15rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #0081ff;
		color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.num {
		float: left;
		width: 90px;
	}

	.numinput {
		border-bottom: 1px solid gray;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<style lang="scss">
.modalTip{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  z-index: 1001;
  .modalTip-body{
    width: 80%;
    height: 440rpx;
    display: flex;
    background-color: rgba(255, 255, 255, 1);
    flex-direction: column;
    align-items: center;
    padding: 27rpx 40rpx;
    border-radius: 21rpx;
  }
  .title{
    display: inline-block;
    font-size: 50rpx;
    color: #000;
  }
  .content{
    margin-top: 20rpx;
    display: inline-block;
    font-size: 38rpx;
    color: #222;
  }
  .button-box{
    margin-top: 60rpx;
    display: flex;
    flex-direction: row;
    width: 100%;
    .button{
      width: 50%;
      font-size: 35rpx;
      color: #000;
      text-align: center;
    }
  }
}
	.uni-input {
		margin-bottom: -10upx;
	}
	.picker {
		text-align: right;
	}

</style>
